<template>
  <div>
    <el-table :data="tableData.data">
      <el-table-column >
        <template #default="scope">
          <div class="commentList">
            <div>{{ scope.row.username }}评论了你的文章----<b>&lt;&lt;{{ scope.row.articleTitle }}&gt;&gt;</b></div>
            <div>评论内容: {{ scope.row.content }}</div>
            <div>评论时间: {{ formatTime( scope.row.createTime) }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      background
      @current-change="getCurrentPage($event)"
      layout="prev, pager, next"
      :page-size=5
      :total="totalNums.total"
    >
    </el-pagination>
  </div>
</template>

<script setup>

import { formatTime } from '../../utils/commonUtils/formatTime'
import { onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { http } from '../../utils/http';
const store = useStore()

let tableData = reactive({ data: [] });
let totalNums = reactive({ total: 0 });
const params = reactive({
  author: store.state.msg.username,
  page: 1,
});
onMounted(async () => {
  const result = await http.get(
    `/comment/findCommentServer?author=${params.author}&page=${params.page}`
  );
  totalNums.total = result.total;
  tableData.data = result.data;
});

const getCurrentPage = async (page) => {
  params.page = page;
  const result = await http.get(
    `/comment/findCommentServer?author=${params.author}&page=${params.page}`
  );
  console.log();
  tableData.data = result.data;
};
</script>

<style lang="scss" scoped>
.el-table{
  height: 550px;
}
</style>